<script lang="ts">

import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router'
import { getUserInfo, getUserFans, getUserFollowees, getUserArticles } from "../api/userInfoView"
import { onMounted } from "vue"
import { storeToRefs } from 'pinia';
import { useCounterStore } from '..//stores/home'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { watch } from 'vue';
import { showToast } from 'vant'




export default defineComponent({
    setup() {



        const store = useCounterStore()
        const { userid } = storeToRefs(store);
        // 作为 action 的 increment 可以直接解构
        const { changnum, increment, incrementfalse, unlikeFuns, likeFuns, uncommentFuns, commentFuns } = store;
        let router = useRouter()
        let token: any = ref(window.localStorage.getItem("userId"))
        console.log(token.value);
        let ArticlesTotal: any = ref(null);
        let FolloweesTotal: any = ref(null);
        let getUserfanslistTotal: any = ref(null);
        let attebtionarr: any = window.localStorage.getItem('idarr');
        let attention = ref(JSON.parse(attebtionarr) || []);
        let myvideojson: any = localStorage.getItem("myvideo");
        let myvideoArr: any = ref(JSON.parse(myvideojson) || []);
        console.log(myvideoArr.value);
        let tovip: any = (): any => {
            router.push({ path: "/vip" })
        }
        // 用户信息,头像,nickname
        let userInfo: any = ref([])
        const getUserInfoFun = (): any => {
            getUserInfo(token.value).then((data: any) => {
                console.log("getUserInfo=>", data)
                userInfo.value = data.data
            })
        }

        // 获取用户粉丝
        let fans: any = ref([])
        let getUserfanslist: any = ref(null)
        const getUserFansFun = (): any => {
            getUserFans(token.value).then((data: any) => {
                console.log("getUserFans=>", data)
                getUserfanslist.value = data



                fans.value = data.data.list
                console.log("getUserlist=>", getUserfanslist.value)
            })
        }
        // 获取用户关注
        let Followees: any = ref([])
        const getUserFolloweesFun = (): any => {
            getUserFollowees(token.value).then((data: any) => {
                console.log("getUserFollowees=>", data);
                FolloweesTotal.value = data.data;
                Followees.value = data.data.list
                console.log("Followees=>", Followees)
            })
        }

        // 获取用户视频
        let Articles: any = ref([])
        const getUserArticlesFun = (): any => {
            getUserArticles(token.value).then((data: any) => {
                console.log("getUserArticles=>", data);
                ArticlesTotal.value = data.data;
                console.log(2222222, ArticlesTotal.value)
                Articles.value = data.data.list
                console.log("Articles=>", Articles)
            })
        }
        watch(token, () => {
            console.log("qqqq");

            getUserInfoFun()
            getUserFansFun()
            getUserFolloweesFun()
            getUserArticlesFun()

        })
        let toregisterFun = () => {
            router.push({
                path: '/register',
            });

        }
        // 点击我的关注
        let tomyattention = () => {
            console.log(111);

            router.push({
                path: '/myattention',
            });
        }
        // 点击我的粉丝
        let tomyfans = () => {
            console.log(111);

            router.push({
                path: '/mylikefans',
            });
        }
        // 点击我的视频
        let tomyvido = () => {
            console.log(111);

            router.push({
                path: '/userdetail',
                query: {
                    userid: userid.value,
                    active: 1,
                }
            });
        };
        //点击主页
        let click_user = () => {
            router.push({
                path: '/userdetail',
                query: {
                    userid: token.value,
                }
            })
        }


    // 点击我的喜欢视频
        let tomybyns=()=>{
            console.log(11);
            router.push({
                    path: "/mysbyns"
                })
            
        }


        //去草稿箱
        let todraft = () => {
            router.push({
                path: '/MyDraft'
            }
            )
        }
        // 点击立即登录
        let tologing=()=>{
            router.push({
                path: '/register'
            }
            )
        }

        //订单管理
        let ordermanage = () => {
            router.push({
                path: '/OrderManage'
            }
            )
        }
        let myclass = () => {
            router.push({
                path: '/myclass'
            })
        }
        let toaddvideo = () => {
            router.push({
                path: '/addvideo'
            })
        };
        let click_mycollect = () => {
            router.push({
                path: '/MyCollectVideo'
            })
        };
        let click_mysendvideo = () => {
            router.push({
                path: '/MySendVideo'
            })
        }
        // 去我的手记
        let tomyNote = () => {
            router.push({
                path: "/mynote"
            })
        }
        // 去身份认证
        let toauthentication = () => {
            let localidentityArr = JSON.parse(window.localStorage.getItem("identityArr"))
            console.log("localidentityArr=>", localidentityArr)
            if (localidentityArr != null) {
                showToast('您已成功认证,无需再次认证');
            } else {
                router.push({
                    path: "/authentication"
                })
            }
        }

        // 点击退出登入
        let outmain = () => {
            window.localStorage.removeItem("token")
            window.localStorage.removeItem("userId");
            token.value = window.localStorage.getItem("userId");
            router.push({
                path: '/userinfo',
                query: {
                    token: 1
                }
            })
            getUserInfoFun()
            getUserFansFun()
            getUserFolloweesFun()
            getUserArticlesFun()

        }
        let idarr = localStorage.getItem('identityArr');

        // 判断是否是vip
        let localvip = JSON.parse(window.localStorage.getItem("vip"))

        let isvip: any = ref(localvip || {})

        onMounted(() => {
            getUserInfoFun()
            getUserFansFun()
            getUserFolloweesFun()
            getUserArticlesFun();
            

        })

        return {
            tovip,
            userInfo,
            fans,
            Followees,
            Articles,
            token,
            getUserfanslist,
            outmain,
            tologing,
            viewCount,
            tomyfans,
            tomyvido,
            toregisterFun,
            tomyattention,
            todraft,
            ordermanage,
            click_user,
            myclass,
            tomybyns,
            toaddvideo,
            ArticlesTotal,
            FolloweesTotal,
            getUserfanslistTotal,
            click_mycollect,
            click_mysendvideo,
            myvideoArr,
            tomyNote,
            toauthentication,
            idarr,
            isvip,
            attention
        }
    },


})



</script>



<template>
    <div class="userinfo" v-if="token">
        <div class="userin-bg">
            <div class="userinfo-top">
                <span class="iconfont icon-user-avatar"></span>
                <span class="iconfont icon-31shezhi"></span>
                <span class="iconfont icon-lingdang"></span>
            </div>
            <div class="userinfo-head">
                <img :src="'https://images.weserv.nl/?url=' + userInfo.avatar">
                <div class="userinfo-detail">
                    <p class="user-name">{{ userInfo.username }}
                    <span class="iconfont icon-huiyuanzhongxin1" style="color:#d55645" v-show="isvip.Vip==1"></span>
                    <span class="iconfont icon-huiyuanzhongxin1" style="color:gold" v-show="isvip.Vip==2"></span>
                    <em v-if="idarr">已实名</em></p>
                    <p class="user-head-btn" @click="click_user">主页 <span class="iconfont icon-xiangyoujiantou"></span></p>
                </div>

            </div>
            <!-- 视频 粉丝  -->
            <div class="userinfo-count" v-if="ArticlesTotal">
                <p class="count-video" @click="tomyvido">
                    <span class="count">{{ viewCount(ArticlesTotal.total + myvideoArr.length) }}</span>
                    <span class="name">视频</span>

                </p>
                <p class="count-flow" @click="tomyattention" v-if="FolloweesTotal">
                    <span class="count">{{ viewCount(FolloweesTotal.total+attention.length) }}</span>
                    <span class="name">关注</span>

                </p>
                <p class="count-fans" @click="tomyfans" v-if="getUserfanslist">
                    <!-- getUserlist.total -->
                    <span class="count">{{ viewCount(getUserfanslist.data.total) }}</span>
                    <span class="name">粉丝</span>

                </p>

            </div>
        </div>

        <!-- 我的收藏 历史记录等等 -->
        <div class="userinfo-mybtn">
            <div class="mybyns" @click="click_mycollect">
                <span class="iconfont icon-wode-wodeshoucang" style="color:#ff8d25;font-size:30px;"></span>
                <p>我的收藏</p>
            </div>
             <div class="mybyns" @click="tomybyns">
                <!-- <img src="../assets/images/swiper1.webp" alt=""> -->
                <span class="iconfont icon-aixin--kuai" style="color:#e67676;font-size:25px;"></span>
                <p>我的喜欢</p>
                    </div>
                <!--    <div class="mybyns">
                        <img src="../assets/images/swiper1.webp" alt="">
                        <p>私密空间</p>
                    </div> -->
            <div class="mybyns btns" @click.stop="click_mysendvideo">
                <span class="iconfont icon-shipin7" style="color:#59a4de;font-size:30px;"></span>
                <p>我的视频</p>
            </div>
            <div class="mybyns" @click.stop="tomyNote">
                <span class="iconfont icon-bijiben-copy" style="color:#f9654c;font-size:30px;"></span>
                <p>我的手记</p>
            </div>
        </div>

        <!-- 创作人中心 -->
        <div class="user-creator">
            <h3>创作人中心</h3>
            <div class="user-creator-btn">
                <div class="btns">
                    <span class="iconfont icon-neirongguanli"></span>
                    <p>内容管理</p>
                </div>

                <div class="btns" @click="toaddvideo">
                    <span class="iconfont icon-xinxifabu"></span>
                    <p>发布作品</p>
                </div>
                <div class="btns" @click.stop="todraft">
                    <span class="iconfont icon-del"></span>
                    <p>草稿箱</p>
                </div>

                <div class="btns" @click="toauthentication">
                    <span class="iconfont icon-shenhe_gaizhang"></span>
                    <p>身份认证</p>
                </div>
            </div>

        </div>

        <!-- 社区服务 -->
        <div class="service">
            <h3>社区服务</h3>
            <div class="user-creator-btn">
                <div class="btns" @click.stop="myclass">
                    <span class="iconfont icon-jihua1"></span>
                    <p>我的课程</p>
                </div>

                <div class="btns">
                    <span class="iconfont icon-yigou2"></span>
                    <p>已购素材</p>
                </div>
                <div class="btns" @click.stop="ordermanage">
                    <span class="iconfont icon-dingdan"></span>
                    <p>订单管理</p>
                </div>

                <div class="btns" @click="tovip">
                    <span class="iconfont icon-huiyuanzhongxin"></span>
                    <p>会员中心</p>
                </div>
            </div>

        </div>

        <div class="log-out" @click="outmain">
            <div class="log-out-text">退出登录</div>
        </div>


    </div>

    <div class="userinfo" v-else>

        <div class="userin-bg">
            <div class="userinfo-top">
                <span class="iconfont icon-user-avatar"></span>
                <span class="iconfont icon-31shezhi"></span>
                <span class="iconfont icon-lingdang"></span>
            </div>

            <div class="userinfo-head">
                <img src="https://img.zcool.cn/community/01e0ae58ae3d72a801219c77fadb52.png@1280w_1l_2o_100sh.png"
                    @click.stop="toregisterFun">
                <div class="userinfo-detail">
                    <p class="user-name" @click.stop="toregisterFun">点击登录</p>
                    <p class="user-head-btn" @click.stop="toregisterFun">主页 <span
                            class="iconfont icon-xiangyoujiantou"></span></p>
                </div>

            </div>
            <!-- 视频 粉丝  -->
            <div class="userinfo-count">
                <p class="count-video" @click.stop="toregisterFun">
                    <span class="count">-</span>
                    <span class="name">视频</span>

                </p>
                <p class="count-flow" @click.stop="toregisterFun">
                    <span class="count">-</span>
                    <span class="name">关注</span>

                </p>
                <p class="count-fans" @click.stop="toregisterFun">
                    <span class="count">-</span>
                    <span class="name">粉丝</span>

                </p>

            </div>
        </div>

        <!-- 我的收藏 历史记录等等 -->
        <div class="userinfo-mybtn">
            <div class="mybyns" @click.stop="toregisterFun">
                <!-- <img class="iconfont icon-wodeshoucangyong" > -->
                <span class="iconfont icon-wode-wodeshoucang" style="color:#ff8d25;font-size:30px;"></span>
                <p>我的收藏</p>
            </div>
            <div class="mybyns" @click.stop="toregisterFun">
                <!-- <img src="../assets/images/swiper1.webp" alt=""> -->
                <span class="iconfont icon-aixin--kuai" style="color:#e67676;font-size:25px;"></span>
                <p>我的喜欢</p>
            </div>
            <!-- <div class="mybyns" @click.stop="toregisterFun">
                        <img src="../assets/images/swiper1.webp" alt="">
                        <p>私密空间</p>
                    </div> -->
            <div class="mybyns btns" @click.stop="toregisterFun">
                <span class="iconfont icon-shipin7" style="color:#59a4de;font-size:30px;"></span>
                <p>我的视频</p>
            </div>
            <div class="mybyns" @click.stop="toregisterFun">
                <!-- <img src="../assets/images/swiper1.webp" alt=""> -->
                <span class="iconfont icon-bijiben-copy" style="color:#f9654c;font-size:30px;"></span>

                <p>我的手记</p>
            </div>
        </div>

        <!-- 创作人中心 -->
        <div class="user-creator">
            <h3>创作人中心</h3>
            <div class="user-creator-btn">
                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-neirongguanli"></span>
                    <p>内容管理</p>
                </div>

                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-xinxifabu"></span>
                    <p>发布作品</p>
                </div>
                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-del"></span>
                    <p>草稿箱</p>
                </div>

                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-shenhe_gaizhang"></span>
                    <p>身份认证</p>
                </div>
            </div>

        </div>

        <!-- 社区服务 -->
        <div class="service">
            <h3>社区服务</h3>
            <div class="user-creator-btn">
                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-jihua1"></span>
                    <p>我的课程</p>
                </div>

                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-yigou2"></span>
                    <p>已购素材</p>
                </div>
                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-dingdan"></span>
                    <p>订单管理</p>
                </div>

                <div class="btns" @click.stop="toregisterFun">
                    <span class="iconfont icon-huiyuanzhongxin"></span>
                    <p>会员中心</p>
                </div>
            </div>

        </div>
        <div class="log-out" @click="tologing">
            <div class="log-out-text">立即登录</div>
        </div>

    </div>
</template>

<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

.userinfo {
    background-color: #f3f4f6;

    .userin-bg {
        background-image: linear-gradient(#f3cac4, #f3f4f6);

        .userinfo-top {
            height: 44px;
            width: 100%;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            justify-content: end;
            align-items: center;
            box-sizing: border-box;

            span {
                margin-left: 20px;
                font-size: 23px;
            }
        }

        .userinfo-head {
            display: flex;
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;

            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: 2px solid #f4eee8;
                margin-right: 10px;
            }

            .userinfo-detail {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .user-name{
                    em{
                        font-size: 12px;
                        background-color: #13b684;
                        padding:3px 5px;
                        border-radius: 5px;
                        color:#fff;
                        margin-left: 5px;
                    }
                }
                .user-head-btn {
                    width: 59px;
                    height: 28px;
                    background-color: #ffffff;
                    border-radius: 15px;
                    line-height: 28px;
                    text-align: center;
                    font-size: 13px;

                    .icon-xiangyoujiantou {
                        font-size: 11px;
                    }
                }
            }
        }

        .userinfo-count {
            display: flex;
            height: 40px;
            width: 100%;
            justify-content: space-around;
            margin-top: 20px;

            .count-video,
            .count-flow,
            .count-fans {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: center;

                .count {
                    color: #9c989e;
                    // font-size: 14px;
                }

                .name {
                    font-size: 14px;
                }

            }


        }
    }

    .userinfo-mybtn {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 20px;
        height: 100px;

        background-color: #ffffff;
        border-radius: 15px;
        ;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;

        .mybyns {
            width: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                height: 27px;
                width: 27px;
            }

            p {
                font-size: 12px;
                text-align: center;
                margin-top: 10px;
            }

        }
    }

    .user-creator,
    .service {
        width: 90%;
        margin: 0 auto;
        margin-top: 10px;
        background-color: #ffffff;
        height: 135px;
        border-radius: 15px;
        padding-top: 15px;
        box-sizing: border-box;
        // padding-left: 16px;
        padding-bottom: 16px;
        // padding-right: 16px;

        h3 {
            font-weight: bolder;
            padding-left: 16px;

        }

        .user-creator-btn {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            ;

            .btns {
                display: flex;
                flex-direction: column;
                align-items: center;

                span {
                    font-size: 24px;
                }

                p {
                    font-size: 13px;
                    color: #7b7e87;
                    margin-top: 10px;
                }

            }
        }

    }

    .log-out {
        padding: 14px 0;
        width: 90%;
        margin: 0 auto;
        // width: 100%;


        .log-out-text {
            // width: 100%;
            margin: 0 auto;
            text-align: center;
            padding: 9px 10px;
            font-size: 14px;
            border-radius: 999px;
            background-color: rgb(230, 118, 118);
            color: white;


        }
    }
}
</style>